import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt5Compat.GraphicalEffects

Rectangle {
    signal wPositionChanged(x:int,y:int)
    signal pageIndexChanged(index:int)
    property color backgroudColor: '#ededed'
    property int index: 0
    id: root
    color : backgroudColor
    Column {
        z:1
        spacing: 20
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20

        Rectangle {
            width: 35
            height: 35

            Rectangle {
                id: mask
                width: 35
                height: 35
                radius: 4
                visible: false
            }

            OpacityMask {
                anchors.fill: parent
                source: Image {
                    source: 'qrc:/img/icon/me.jpg'
                }
                maskSource: mask
            }

            MouseArea {
                anchors.fill: parent
                onClicked: console.log("Image clicked")
            }
        }

        MainPanelButton {
            tiptext:'海信'
            icon.source: index ===0 ? 'qrc:/img/icon/聊天_1.png':'qrc:/img/icon/聊天.png'
            icon.color : 'transparent'
            onClicked: {
               console.log("聊天 clicked")
               index = 0
               root.pageIndexChanged(index)
            }
        }

        MainPanelButton {
            tiptext:'通讯录'
            icon.source: 'qrc:/img/icon/通讯录.png'
            onClicked: {
                console.log("通讯录 clicked")
                index = 1
                root.pageIndexChanged(index)
            }
        }

        MainPanelButton {
            tiptext:'收藏'
            icon.source: 'qrc:/img/icon/收藏.png'
            onClicked: {
                index = 2
                console.log("收藏 clicked")
                root.pageIndexChanged(index)
            }
        }

        MainPanelButton {
            tiptext:'朋友圈'
            icon.source: 'qrc:/img/icon/朋友圈.png'
            onClicked: {
                console.log("朋友圈 clicked")
            }
        }

        MainPanelButton {
            tiptext:'视频号'
            icon.source: 'qrc:/img/icon/视频号.png'
            onClicked: {
                console.log("视频号 clicked")
            }
        }

        MainPanelButton {
            tiptext:'小程序'
            icon.source: 'qrc:/img/icon/小程序.png'
            onClicked: {
                console.log("小程序 clicked")
            }
        }
    }

     Column {
         z:1
         spacing: 20
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 30

         MainPanelButton {
             tiptext:'手机'
             icon.source: 'qrc:/img/icon/手机.png'
             onClicked: {
                 console.log("手机 clicked")
             }
         }

         MainPanelButton {
             tiptext:'更多'
             icon.source: 'qrc:/img/icon/菜单.png'
             onClicked: {
                 console.log("菜单 clicked")
             }
         }
     }


     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton
         property point clickPos: '0,0'
         // onPressed: function (mouse) {
         //     clickPos = Qt.point(mouse.x, mouse.y)
         // }
         onPressed: (mouse) => {
            if(mouse.x < 10 || mouse.x > width-10 ||
               mouse.y < 10 || mouse.y > height-10) {
                 mouse.accepted = false
            } else {
                clickPos = Qt.point(mouse.x, mouse.y)
                mouse.accepted = true  // 允许穿透到上层
            }
         }
         onPositionChanged: function (mouse) {
             var delta = Qt.point(mouse.x - clickPos.x,
                                  mouse.y - clickPos.y)
             wPositionChanged(delta.x,delta.y)
         }
     }
}
